<template>
  <div>
    <h1 style="text-align: center">概述页</h1>
      <el-card>
        <h3 style="text-align: center">上下行速度</h3>
        <SpeedChartOne/>
      </el-card>
    <div class="block">
      <el-date-picker
        v-model="timeInterval"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
    </div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="16">
          <FlowChart :datelist="dateList"/>
          <TimeLineChart :datelist="dateList"/>
        </el-col>
        <el-col :span="8">
          <ProtocolChart/>
          <WarningTypeChart :datelist="dateList"/>
        </el-col>
<!--        <el-col :span="6">-->
<!--          <h3 style="text-align: center">上下行速度</h3>-->
<!--          <SpeedChartOne/>-->
<!--        </el-col>-->
      </el-row>
    </el-card>
  </div>
</template>

<script>
import FlowChart from '../Overviewchart/FlowChart'
import SpeedChartOne from '../Overviewchart/SpeedChartOne'
import TimeLineChart from '../Overviewchart/TimeLineChart'
import ProtocolChart from '../Overviewchart/ProtocolChart'
import WarningTypeChart from '../Overviewchart/WarningTypeChart'
import FlowChartDataHandle from '../../DataHandle/FlowChartDataHandle'
export default {
  name: 'Overview',
  data() {
    return {
      setIntervalFlag:null,

      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate: time => {
          let _now = Date.now()
          let seven = 60 * 24 * 60 * 60 * 1000
          let preSevenDays = _now - seven
          return time.getTime() > _now || time.getTime() < preSevenDays
        },
        onPick: (maxDate, minDate) => {
          maxDate = minDate + 7 * 24 * 60 * 60 * 1000
        }
      }, // 日期设置对象
      timeInterval: '',
      dateList: ['2019-12-20', '2019-12-21', '2019-12-22', '2019-12-23', '2019-12-24', '2019-12-25']
    }
  },
  created() {
    // this.getDefaultData(this.dateList[0],this.dateList[this.dateList.length - 1])
    this.autoRefresh()
  },
  watch: {
    timeInterval(date) {
      this.dateList = []
      let startDay = date[0]
      let endDay = date[1]
      let dateInterval = (endDay - startDay) / 1000 / 60 / 60 / 24 + 1
      let oneDay = 24 * 60 * 60 * 1000
      for (let i = 0; i < dateInterval; i++) {
        let nextDay = startDay.getTime() + oneDay * i
        nextDay = new Date(nextDay)
        this.dateList.push(
          `${nextDay.getFullYear()}-${nextDay.getMonth() +
            1}-${nextDay.getDate()}`
        )
      }
      // this.getSpecifiedDateData()
      this.autoRefresh()
    }
  },
  beforeDestroy() {
    clearInterval(this.setIntervalFlag);
  },
  methods: {
    autoRefresh(){
      let today = new Date();
      let todayStr = `${today.getFullYear()}-${today.getMonth() +
      1}-${today.getDate()}`
      if (todayStr === this.dateList[this.dateList.length - 1]) {
        this.setIntervalFlag = setInterval(()=>{
          this.getSpecifiedDateData()
        },5000)
      } else {
        clearInterval(this.setIntervalFlag)
        this.getSpecifiedDateData()
      }
    },
    async getDefaultData(startDate,endDate) {
      console.log(startDate,endDate)
      let params = new URLSearchParams()
      params.append('startDate', startDate)
      params.append('endDate', endDate)
      let typeJsonRes = await this.$http.post(
        '/accessType/findAllAccessType',
      )
      let getCapPackClassifyForDateRes = await this.$http.post(
        '/zz/getCapPackClassifyForDate',
        params
      )
      let getAlarmByDateRes = await this.$http.post(
        '/zz/getAlarmByDate',
        params
      )
      // let getSpeedInfoRes = await this.$http.post(
      //   '/zz/getSpeedInfo',
      //   params
      // )
      // if (getSpeedInfoRes.data.status !== 200) {
      //   return this.$message.error('请求数据失败')
      // }else {
      //   let SpeedInfo = getSpeedInfoRes.data.speedInfo;
      //   this.$Pubsub.publish("SpeedInfo",SpeedInfo)
      // }

      if (getAlarmByDateRes.data.status !== 200) {
        return this.$message.error('请求数据失败')
      } else {
        let WarningTypeChartData = FlowChartDataHandle.alarmTran(getAlarmByDateRes.data,new Date(startDate))
        this.$Pubsub.publish("WarningTypeChartData",WarningTypeChartData)
      }
      if (getCapPackClassifyForDateRes.data.status !== 200) {
        return this.$message.error('请求数据失败')
      } else {
        FlowChartDataHandle.typeJson = typeJsonRes.data
        let resDate =
          FlowChartDataHandle.tran(getCapPackClassifyForDateRes.data,FlowChartDataHandle.typeJson,
            new Date(startDate),0
          )
        this.$Pubsub.publish("timeLineData",resDate[1])
        this.$Pubsub.publish("flowChartData",[resDate[0],resDate[2]])
        this.$Pubsub.publish("protocolChartData",[resDate[3],resDate[4]])
        console.log(resDate)
        console.log(getCapPackClassifyForDateRes)
      }
    },
    async getSpecifiedDateData() {
      await this.getDefaultData(this.dateList[0],this.dateList[this.dateList.length - 1])
    },
  },
  components: {
    FlowChart,
    SpeedChartOne,
    ProtocolChart,
    WarningTypeChart,
    TimeLineChart
  }
}
</script>

<style scoped>
</style>
